<template>
  <div class="template">
    <hunk-head  v-if="isList" :name="isList?'选中房源':'分享的房源'"></hunk-head>
    <hunk-head v-else icon="home" :name="isList?'选中房源':'分享的房源'"></hunk-head>
    <!-- <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#FFAA58"></uni-segmented-control> -->
    <!-- <div class="linkList">

    </div> -->
    <scroll-view
      class="prv-container"
      scroll-y="true"
      :refresher-enabled="refresherEnabled"
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @refresherrestore="triggered = false"
      @refresherabort="triggered = false"
      @scrolltolower="_onLoadmore"
    >
      <div class="linkList">
        <div class="list-item" v-for="(item, index) in linkList" :key="index" @click.stop="goDetail(item)">
        <!-- <div class="list-item"> -->
          <div class="leftImg">
            <img :src="item.defaultimg" alt="" srcset="">
            <div :class="['leftTop', item.islease ? 'red':'green']">{{ item.islease ? '已租':'未租'}}</div>
          </div>
          <div class="rightText">
            <div class="text-top">
              {{item.outtype ? '整租':'合租'}}-{{item.housetitle}}
              <!-- 整租-天星美和园公寓3栋-二单元-302 -->
            </div>
            <div class="time">
              {{item.roomarea}}m²/{{item.roomtype}}室/{{item.renovation}}
              <!-- 10m²/1室/简装修 -->
            </div>
            <div class="money">
              <span>{{item.lowrent}}元</span>
              /月
            </div>
            <div class="btn" @click.stop="setInfo(item)" v-if="!isList">
              <picker class='one' mode="multiSelector" @change="bindStartMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
                <div class="one">预约看房</div>
                </picker>
              <!-- <div>下单入住</div> -->
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
    <uni-popup ref="popup" type="center">
      <div class="tips">
        <div class="tips-top">提示</div>
        <div class="tips-text">
          请在首页查询预约状态，以及房东联系方式
        </div>
        <div class="tips-text">
          预约时间：{{datetimerange}}
        </div>
        <div class="tips-btn">
          <div class="btn-closs" @click="lianxi">取消</div>
          <div  @click="checkPopup">确认</div>
        </div>
      </div>
    </uni-popup>
    <uni-popup ref="popup1" type="center">
      <div class="tips1">
        <div class="tips-top">认证授权</div>
        <div class="tips-text">尊敬的用户，您还未进行实名认证，是否进行实名认证</div>
        <div class="tips-btn">
          <div class="btn-closs" @click="closePopup1">取消</div>
          <div  @click="gorenzheng">确认</div>
        </div>
      </div>
    </uni-popup>
    <uni-popup ref="approve" type="center">
      <div class="tips2">
        <div class="tips-top">提示</div>
        <div class="tips-text">尊敬的用户，您还未进行用户授权，是否进行用户授权？</div>
        <div class="tips-btn">
          <div class="btn-closs" @click="closeP">取消</div>
          <div  @click="checkedP">确认</div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
import Head from '@componentsMine/head'
import { getSharHouseList } from '@/apis/share'
import {Save} from '@/apis/tenant/reserve'
import store from '@store/index'
import {formatTime,format_chinese_date} from '@utils/util'
import {GetUserInfo_openid,getuseropenid} from '@/apis/user'
export default {
  components: {
    'hunk-head': Head
  },
  data() {
    return {
      isList:false,
      refresherEnabled: true,
      triggered:false,
      linkList:[
      ],
      name:'',
      shareuserid:'',
      current_date: null,
      datetimerange: "",
      weekday: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      multiArray: [['今天', '明天'], [1, 2, 3, 4, 5, 6], [0, 30]],
      multiIndex: [0, 0, 0],
      start:'',
      end: '',
      houseList:[],
      limit:10,
      offset: 1,
      clickInfo:null,
      len:0
    }
  },
  computed:{
    userInfo() {
      return this.$store.state.baseStore.userInfo
    }
  },
  onLoad(e){
 
    let data = JSON.parse(e.query)
       if(data.isList){
      this.isList = true
    }
    this.houseList = data.houseLits
    this.shareuserid = data.shareUserId
    this.len = data.houseLits.length
    
    this.isShouquan()
    this.current_date= new Date()
    this.getSharHouseList()
  },
  created(){
    this.pickerTap()
  },
  methods: {
    checkedP(){
      this.$refs.approve.close()
      uni.navigateTo({ url: '/subPackage/link/approve' })
    },
    closeP(){
      this.$refs.approve.close()
      uni.reLaunch({ url: '/pages/login/checkUser' })
    },
    closePopup1(){
      this.$refs.popup1.close()
    },
    lianxi(){
      this.$refs.popup.close()
    },
    setInfo(item){
      this.clickInfo = item
    },
    gorenzheng(){
      this.$refs.popup1.close()
      uni.navigateTo({ url: '/subPackage/link/renzheng' })
      // this.$jump({path:'/pages/link/renzheng'})
    },
    goDetail(item){
      if(!this.userInfo.userid){
        this.$refs.approve.open()
      }else{
        uni.navigateTo({ url: '/subPackage/link/houseDetail?query='+item.houseroomid+'&shareUserId='+this.shareuserid+'&isList='+this.isList })
      }
    },
    checkPopup(){
      let user = this.$store.state.baseStore.userInfo
      if(!user.userid){
        this.$refs.approve.open()
        return
      }
      // console.log('预约9999',this.)
      let data ={
        "endtime": this.end,
        "houseid": this.clickInfo.houseid,
        "houseroomid": this.clickInfo.houseroomid,
        "riqi": this.riqi,
        "starttime": this.start[1]+"",
        "userid": user.userid,
        "shareuserid":this.shareuserid
      }
      console.log('预约9999',data)
      let that = this
      Save(data).then(res=>{
        uni.showToast({
          title: res.msg,
          icon: 'none',
          success:()=>{
            that.$refs.popup.close()
          }
        })
      })
    },
    getSharHouseList(){
      let that = this
      let data = {
        limit: this.limit,
        offset: this.offset,
        wids:this.houseList.join(','),
        outtype: 0
      }
      getSharHouseList(data).then(res=>{
        if(res.code == 200){
          // this.linkList = res.data
          if (that.offset === 1) {
            that.linkList = res.data
          }else if(that.linkList.length >= res.total){
            return
          } else {
            that.linkList = that.linkList.concat(res.data)
          }
          that.$forceUpdate()
        }
      })
    },
    // onClickItem(e){
    //   this.current = e.currentIndex
    //   this.getSharHouseList()
    // },
    onRefresh(){
      this.offset = 1
      this.getSharHouseList()
      this.triggered = 'restore'
      setTimeout(() => {
        this.triggered = false
      }, 1000)
    },
    _onLoadmore(){
      this.offset++
      this.getSharHouseList()
    },
  pickerTap() {
    let date = new Date();
    var monthDay = [];
    var hours = [];
    var minute = [];
    
    this.currentHours = date.getHours();
    this.currentMinute = date.getMinutes();
    var today = date.getDay();//获取存储当前日期
    monthDay.push('今天 ' + this.weekday[today]);
    if(today === 6) {
      monthDay.push('明天 ' + this.weekday[0]);
    }else {
      monthDay.push('明天 ' + this.weekday[today + 1]);
    }

    let multiIndex = this.multiIndex;
    if(multiIndex[0] === 0) {
      if(multiIndex[1] === 0) {
        this.loadData(hours, minute);
      } else {
        this.loadMinute(hours, minute);
      }
    } else {
      this.loadHoursMinute(hours, minute);
    }

    this.multiArray[0] = monthDay;
    this.multiArray[1] = hours;
    this.multiArray[2] = minute;
  },
  bindMultiPickerColumnChange:function(e) {
    console.log('点击999888')
    let date = new Date();
    var that = this;
    var monthDay = ['今天', '明天'];
    var hours = [];
    var minute = [];

    this.currentHours = date.getHours();
    this.currentMinute = date.getMinutes();

    // 把选择的对应值赋值给 multiIndex
    this.multiIndex[e.detail.column] = e.detail.value;
    // console.log('滚动',e.detail)
    // 然后再判断当前改变的是哪一列,如果是第1列改变
    if (e.detail.column === 0) {
      // 如果第一列滚动到第一行
      if (e.detail.value === 0) {
        let aa = that.loadData(hours, minute)
        hours = aa.hours
        minute = aa.minute
      } else {
        let aa = that.loadHoursMinute(hours, minute)
        hours = aa.hours
        minute = aa.minute
      }
      this.multiIndex[1] = 0;
      this.multiIndex[2] = 0;
      // 如果是第2列改变
    } else if (e.detail.column === 1) {
      // 如果第一列为今天
      if (this.multiIndex[0] === 0) {
        if (e.detail.value === 0) {
          // that.loadData(hours, minute)
          let aa = that.loadData(hours, minute)
          hours = aa.hours
          minute = aa.minute
        } else {
          // that.loadMinute(hours, minute)
          let aa = that.loadMinute(hours, minute)
          hours = aa.hours
          minute = aa.minute
        }
        // 第一列不为今天
      } else {
        // that.loadHoursMinute(hours, minute)
        let aa = that.loadHoursMinute(hours, minute)
        hours = aa.hours
        minute = aa.minute
      }
      this.multiIndex[2] = 0;

      // 如果是第3列改变
    } else {
      // 如果第一列为'今天'
      if (multiIndex[0] === 0) {
        // 如果第一列为 '今天'并且第二列为当前时间
        if(this.multiIndex[1] === 0) {
          // that.loadData(hours, minute)
          let aa = that.loadData(hours, minute)
          hours = aa.hours
          minute = aa.minute
        } else {
          // that.loadMinute(hours, minute)
          let aa = that.loadMinute(hours, minute)
          hours = aa.hours
          minute = aa.minute
        }
      } else {
        // that.loadHoursMinute(hours, minute)
        let aa = that.loadHoursMinute(hours, minute)
        hours = aa.hours
        minute = aa.minute
      }
    }
    this.multiArray[1] = hours;
    this.multiArray[2] = minute;
    this.$forceUpdate()
  },
  loadData: function (hours, minute) {
    var minuteIndex;
    if (this.currentMinute > 0 && this.currentMinute <= 30) {
      minuteIndex = 30;
    } else {
      minuteIndex = 60;
    }

    if (minuteIndex == 60) {
      // 时
      for (var i = this.currentHours + 1; i < 24; i++) {
        hours.push(i);
      }
      // 分
      for (var i = 0; i < 60; i += 30) {
        minute.push(i);
      }
    } else {
      // 时
      for (var i = this.currentHours; i < 24; i++) {
        hours.push(i);
      }
      // 分
      for (var i = minuteIndex; i < 60; i += 30) {
        minute.push(i);
      }
    }
    return {
      hours:hours,minute:minute
    }
  },
  loadHoursMinute: function (hours, minute){
    // 时
    for (var i = 0; i < 24; i++) {
      hours.push(i);
    }
    // 分
    for (var i = 0; i < 60; i += 30) {
      minute.push(i);
    }
    return {
      hours:hours,minute:minute
    }
  },
  loadMinute: function (hours, minute) {
    var minuteIndex;
    if (this.currentMinute > 0 && this.currentMinute <= 30) {
      minuteIndex = 30;
    } else {
      minuteIndex = 60;
    }
    if (minuteIndex == 60) {
      // 时
      for (var i = this.currentHours + 1; i < 24; i++) {
        hours.push(i);
      }
    } else {
      // 时
      for (var i = this.currentHours; i < 24; i++) {
        hours.push(i);
      }
    }
    // 分
    for (var i = 0; i < 60; i += 30) {
      minute.push(i);
    }
    return {
      hours:hours,minute:minute
    }
  },
  async bindStartMultiPickerChange(e) {
    console.log('点击99999')
    var that = this, start_date = null, start_date_text = '', end_date = null, end_date_text = '', _date = that.current_date;
    const day = that.current_date.getDate();
    const day_index = e.detail.value[0];
    let hours = that.multiArray[1][e.detail.value[1]];
    let minute = that.multiArray[2][e.detail.value[2]];

    if (day_index === 0) {
    } else if (day_index === 1) {
      _date.setDate(day + 1);
    }
    _date.setHours(hours)
    _date.setMinutes(minute)
    _date.setSeconds(0)
    start_date = formatTime(new Date(_date.valueOf()));
    start_date_text = format_chinese_date(_date);
    _date.setMinutes(_date.getMinutes() + 30);
    end_date = formatTime(new Date(_date.valueOf()));
    end_date_text = (_date.getHours() === 0 ? "24" : _date.getHours()) + ":" + (_date.getMinutes()=== 0 ? "00": _date.getMinutes());
    this.datetimerange= start_date_text + '-' + end_date_text
    this.start = start_date_text.split(' ')
    this.end = end_date_text
    this.riqi = start_date.split(' ')[0]
    if(this.userInfo.cardid){
      
      this.$refs.popup.open()
    }else{

      this.$refs.popup1.open()
    }
  },
  isShouquan(){
    let that = this
    wx.login({
      success:(res)=> {
        var code = res.code
        getuseropenid({code}).then(e=>{
          // if(e.data.openid != 'null'){
            wx.setStorageSync('openid', e.data.openid)
            wx.setStorageSync('session_key', e.data.session_key)
            GetUserInfo_openid({openid:e.data.openid}).then(e=>{
              that.isCode = true
              if(e.code == 200){
                store.commit('baseStore/SET_USERINFO', e.data)
                setToken(e.data.token)
              }else if(e.code == 300){
                that.$refs.approve.open()
              }
            }).catch(e=>{
              
            })
          // }else{
          //   that.isCode = false
          //   that.$refs.wxpopup.open()
          // }
        })
      }
    })
  }
  }
}
</script>

<style lang="scss" scoped>
.template {
  @include num();
  background: #F9F9F9;
  display: flex;
  flex-direction: column;
  .prv-container{
      flex: 1;
      overflow-y: auto;
    }
  .linkList{
    margin-top: 2px;
    background: #fff;
    
    .list-item{
      box-sizing: border-box;
      padding: 15px;
      border-bottom: 2px solid #EFEFEF;
      display: flex;
      flex-direction: row;
    }
    .leftImg{
      width: 110px;
      height: 115px;
      margin-right: 15px;
      position: relative;
      img{
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
      .leftTop{
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        height: 18px;
        border-radius: 4px 0px 12px 0px;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 18px;
        padding: 0 10px;
      }
      
      .red{
        background: #FF6B75;
      }
      .green{
        background: #08C881;
      }
      .yellow{
        background: #FFC72D;
      }
    }
    .rightText{
      flex: 1;
      .text-top{
        height: 44px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 22px;
        overflow: hidden;
      }
      .time{
        margin-top: 4px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #4A4A4A;
        line-height: 20px;
      }
      .money{
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FF5A65;
        line-height: 25px;
        span{
          font-size: 18px;
        }
      }
      .btn{
        margin-top: 4px;
        display: flex;
        div{
          width: 76px;
          height: 24px;
          background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
          border-radius: 13px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 24px;
          text-align: center;
        }
        // .one{
        //   margin-right: 10px;
        // }
      }
    }
  }
}
.tips{
    width: 335px;
    // height: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    .tips-top{
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      line-height: 22px;
      margin: 20px 0 30px 0;
    }
    .tips-text{
      // height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6D7278;
      line-height: 22px;
    }
    .tips-btn{
      margin-top: 30px;
      width: 100%;
      border-top: 2px solid #EFEFEF;
      display: flex;
      // position: absolute;
      // bottom: 0;
      div{
        height: 50px;
        width: 50%;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4A4A4A;
        line-height: 50px;
        text-align: center;
      }
      .btn-closs{
        border-right: 2px solid #EFEFEF;
      }
    }
  }
.tips1{
    width: 335px;
    height: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    .tips-top{
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      line-height: 22px;
      margin-top: 20px;
    }
    .tips-text{
      margin: 20px 0;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6D7278;
      line-height: 22px;
      padding: 0 20px;
      text-align: center;
    }
    .tips-btn{
      width: 100%;
      border-top: 2px solid #EFEFEF;
      display: flex;
      position: absolute;
      bottom: 0;
      div{
        height: 40px;
        width: 50%;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4A4A4A;
        line-height: 40px;
        text-align: center;
      }
      .btn-closs{
        border-right: 2px solid #EFEFEF;
      }
    }
  }
.tips2{
    width: 335px;
    height: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    .tips-top{
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      line-height: 22px;
      margin: 20px 0 30px 0;
    }
    .tips-text{
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6D7278;
      padding: 0 20px;
      line-height: 22px;
    }
    .tips-btn{
      width: 100%;
      border-top: 2px solid #EFEFEF;
      display: flex;
      position: absolute;
      bottom: 0;
      div{
        height: 40px;
        width: 50%;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4A4A4A;
        line-height: 40px;
        text-align: center;
      }
      .btn-closs{
        border-right: 2px solid #EFEFEF;
      }
    }
  }
::v-deep .segmented-control{
  height: 45px;
  background: #FFFFFF;
  .segmented-control__text{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFAA58;
    line-height: 45px;
  }
  .segmented-control__item--text{
    border-bottom-width: 3px;
  }
  .segmented-control__item:first-child::after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 2px;
    height: 20px;
    background-color: #EFEFEF;
    // border: 1px solid ;
  }
}
</style>
